

// $(".big-img") 代表找到class为 big-img的元素
// css 修改元素的样式
//   "margin-left" 距离左边的间隙
//   "-1600px"     样式值
//$(".big-img").css("margin-left", "-1600px")

// var 代表定义1个变量
//  变量的名字叫 a，初始值是1
var a = 1

// setInterval 系统提供的函数，作用是 定时执行
//     第一个参数：  函数（定时执行的代码）
//     第二个参数： 定时时间间隔， 单位是毫秒
//                  3000  代表 3s
//    function(){}  代表定义1个函数

//  var timer =  代表保存创建好的定时器
var timer = setInterval(move, 1000)

function move(){
//	alert("你关不掉我！")

	if (a >= 5) {    // 如果a的值已经到最后一张啦，
		a = 0        // 那么重新从第一张
	}
	
	// -800 * a:   -800, -1600, -2400, ...
	// +    作用是： 拼接后面的单位
	$(".big-img").css("margin-left", -800 * a + "px")
	
	// 1. 删除desc li中所有active
	$(".desc li").removeClass("active")
	
	// 2. 给当前轮播图的元素，添加active样式
	//     .eq(a) 代表找到编号为a的元素
	$(".desc li").eq(a).addClass("active")

	a++    // 让a的值自增1：   1,2,3,4，....
}

// mouseover 鼠标移入
$(".desc li").mouseover(function() {
	
	// this 代表当前元素
	// $(this) 转换为 jQuery对象
	// index  当前元素在父元素中间的编号
	a = $(this).index()
	
	// 根据a更新对应的图片
	$(".big-img").css("margin-left", -800*a + "px")
	
	// 1. 清除所有li class
	$(".desc li").removeClass()
	
	// 2. 给当前元素添加 active样式
	$(".desc li").eq(a).addClass("active")
	
	// 停止计时器
	clearInterval( timer )
	
})


// 鼠标移出left元素
$(".left").mouseleave(function() {
	// 创建定时器
	timer = setInterval(move, 1000)
})

